<template>
	<view>
		<u-navbar :is-back="false" title="" :border-bottom="false">
			<view class="slot-wrap">
				<view class="back" @click="navTo('back')">
					<view class="iconfont iconfanhui" :style="{'padding-top': paddingTop}"></view>
					<view class="text">返回</view>
				</view>
				<view class="set">个人资料</view>
				<view class="save" @click="navTo('save')">保存</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="item" @click="selAvatar">
				<view class="left">头像</view>
				<view class="right">
					<view class="info">
						<!-- <image class="img" :src="memberInfo.avatar || '../../static/images/avatar.png'" mode=""></image> -->
						<u-upload ref="upload" width="460rpx" height="90rpx" class="avatar-up" name="image" :deletable="false" :show-progress="progress" :action="action" :file-list="fileList" :multiple="false" max-count="1" @on-success="onSuccess" @on-progress="onProgress"></u-upload>
					</view>
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
			<view class="item">
				<view class="left">昵称</view>
				<view class="right">
					<!-- <view class="info">{{ memberInfo.nickname || '无' }}</view> -->
					<input type="text" class="info" v-model="memberInfo.nickname" placeholder="请输入昵称" />
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/setting/phone')">
				<view class="left">手机</view>
				<view class="right">
					<view class="info">{{ phone }}</view>
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/setting/about')">
				<view class="left">邮箱</view>
				<view class="right">
					<!-- <view class="info">无</view> -->
					<input type="text" class="info" v-model="memberInfo.email" placeholder="请输入邮箱" />
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/setting/about')">
				<view class="left">性别</view>
				<view class="right" @click="selSex">
					<view class="info">{{ sex[memberInfo.sex] }}</view>
					<u-picker mode="selector" v-model="showSex" :range="sex" :default-selector="[1]" @confirm="selSexConfirm"></u-picker>
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
			<view class="item" @click="navTo('/pages/setting/about')">
				<view class="left">城市</view>
				<view class="right" @click="selCity">
					<view class="info">{{ confirmArea }}</view>
					<u-picker mode="region" v-model="showArea" :params="params" @confirm="confirmCity"></u-picker>
					<view class="iconfont icongengduo"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMemberInfo, memberEdit } from '@/api/userApi.js'
	export default {
		data() {
			return {
				action: 'https://api.arapp.net/client/visitor/uploadImage',
				fileList: [], // 默认显示图片
				paddingTop: '2rpx',
				memberInfo: {
					mobile: '',
					nickname: '',
					email: '',
					sex: '',
					city: '',
					province: '',
					avatar: '',
					remark: ''
				},
				showSex: false,
				sex: ['未知','男', '女'],
				showArea: false,
				params: {
					province: true,
					city: true
				},
				confirmArea: '选择地区',
				sexIndex: '',
				progress: false
			}
		},
		onLoad() {
			if(uni.getSystemInfoSync().platform != "ios") {
				this.paddingTop = '8rpx'
			}
			setTimeout(() => {
				this.loading = false
			}, 1000)
			this._getMemberInfo()
		},
		computed: {
			phone() {
				return this.memberInfo.mobile.slice(0,3) + '****' + this.memberInfo.mobile.slice(7) || ''
			}
		},
		methods: {
			selAvatar() {
				console.log(this.$refs.upload)
				this.$refs.upload.remove(0)
			},
			onProgress(e) {
				console.log(e)
				this.progress = true
			},
			onSuccess(e) {
				console.log(e)
				this.memberInfo.avatar = e.data.filename
				this.progress = false
			},
			onError() {
				this.$u.toast('上传失败')
			},
			selSex() {
				this.showSex = true
			},
			selCity() {
				this.showArea = true
			},
			selSexConfirm(val) {
				console.log(val)
				this.sexIndex = val[0]
				this.memberInfo.sex = val[0]
			},
			confirmCity(e) {
				console.log(e)
				this.confirmArea = `${e.province.label} ${e.city.label}`
				this.memberInfo.province = e.province.label
				this.memberInfo.city = e.city.label
				// this.form.province = e.province.label
				// this.form.city = e.city.label
			},
			// back() {
			// 	uni.navigateBack()
			// },
			async _getMemberInfo() {
				// uni.showLoading({title: '加载中...'})
				// setTimeout(() => {
				// 	uni.hideLoading()
				// }, 300)
				const res = await getMemberInfo()
				console.log(res)
				if (res.data.code === 3) {
					console.log('未登录')
					this.$u.toast('未登录')
				} else {
					this.memberInfo = res.data.data
					this.confirmArea = `${res.data.data.province} ${res.data.data.city}`
					this.fileList.push({url: res.data.data.avatar})
				}
			},
			async navTo(data) {
				if (data === 'back') {
					uni.navigateBack()
				} else if (data === '/pages/setting/phone') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/setting/problem-feedback') {
					// uni.navigateTo({url: data})
				} else if (data === '/pages/setting/about') {
					// uni.navigateTo({url: data})
				} else if (data === 'save') {
					// console.log(this.memberInfo)
					if (!this.memberInfo.nickname) return this.$u.toast('请输入昵称')
					let data = {
						nickname: this.memberInfo.nickname,
						sex: this.sexIndex,
						email: this.memberInfo.email,
						city: this.memberInfo.city,
						province: this.memberInfo.province,
						avatar: this.memberInfo.avatar,
						remark: ''
					}
					console.log(data)
					uni.showLoading({title: '加载中...'})
					const res = await memberEdit(data)
					this.$u.toast('修改成功')
					setTimeout(() => {
						uni.setStorageSync('isRefresh', true)
						uni.navigateBack()
					}, 1000)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		.back {
			display: flex;
			font-size: 32rpx;
			.iconfanhui {
				font-weight: bold;
				font-size: 36rpx;
				padding-top: 8rpx;
			}
		}
		.set {
			display: flex;
			margin-left: 26%;
			font-weight: bold;
			font-size: 32rpx;
		}
		.save {
			margin-left: auto;
			font-size: 32rpx;
		}
	}
	.content {
		
		.item {
			background-color: #fff;
			display: flex;
			font-size: 28rpx;
			color: #1c222a;
			padding: 0 30rpx;
			height: 110rpx;
			align-items: center;
			.left {
				font-weight: 800;
				font-size: 28rpx;
			}
			.right {
				display: flex;
				flex: 1;
				align-items: center;
				margin-left: 20%;
				color: #1c222a;
				font-size: 28rpx;
				.info {
					margin-right: auto;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					.img {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}
				.icongengduo {
					color: #b4b4b4;
				}
			}
			&:nth-child(2n-1){
				margin-top: 30rpx;
				border-bottom: 1px solid #f9f9f9;
			}
			&:active {
				background-color: #f9f9f9;
			}
		}
	}
</style>
